<template>
  <div>
    <h1>全选和反选案例</h1>

    <hr>
    <span>全选：</span>
    <input type="checkbox"
           name=""
           id=""
           v-model="isAll">
    <button @click="btn">反选按钮</button>
    <ul>
      <li v-for="item in list"
          :key="item.id">
        <input type="checkbox"
               name=""
               id=""
               v-model="item.flag">
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          name: '猪八戒',
          flag: false
        },
        {
          name: '孙悟空',
          flag: true
        },
        {
          name: '沙和尚',
          flag: false
        }
      ]
    }
  },
  computed: {
    isAll: {
      set (val) {
        // 1：全选功能
        this.list.forEach(item => item.flag = val)
      },
      // 2：复选功能
      get () {
        return this.list.every(obj => obj.flag === true)
      }
    }
  },
  methods: {
    btn () {
      // 3: 反选功能
      this.list.forEach(item => item.flag = !item.flag)
    }
  }
}
</script>

<style>
</style>